<!DOCTYPE html>
<html style="height: 100%;">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,maximum-scale=1, user-scalable=no">
	<title>儿童节开心度调查</title>
	<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
	<script>


	//======================================================== FASTCLICK
         function FastButton(element, handler) {
            this.element = element;
            this.handler = handler;
            element.addEventListener('touchstart', this, false);
         };
         FastButton.prototype.handleEvent = function(event) {
            switch (event.type) {
               case 'touchstart': this.onTouchStart(event); break;
               case 'touchmove': this.onTouchMove(event); break;
               case 'touchend': this.onClick(event); break;
               case 'click': this.onClick(event); break;
            }
         };
         FastButton.prototype.onTouchStart = function(event) {

		event.stopPropagation();
		            this.element.addEventListener('touchend', this, false);
		            document.body.addEventListener('touchmove', this, false);
		            this.startX = event.touches[0].clientX;
		            this.startY = event.touches[0].clientY;
		 isMoving = false;
		         };
		         FastButton.prototype.onTouchMove = function(event) {
		            if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
		               this.reset();
		            }
		         };
		         FastButton.prototype.onClick = function(event) {
		            this.reset();
		            this.handler(event);
		            if(event.type == 'touchend') {
		               preventGhostClick(this.startX, this.startY);
		            }
		         };
		         FastButton.prototype.reset = function() {
		            this.element.removeEventListener('touchend', this, false);
		            document.body.removeEventListener('touchmove', this, false);
		         };
		         function preventGhostClick(x, y) {
		            coordinates.push(x, y);
		            window.setTimeout(gpop, 2500);
		         };
		         function gpop() {
		            coordinates.splice(0, 2);
		         };
		         function gonClick(event) {
		            for(var i = 0; i < coordinates.length; i += 2) {
		               var x = coordinates[i];
		               var y = coordinates[i + 1];
		               if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
		                  event.stopPropagation();
		                  event.preventDefault();
		               }
		            }
		         };
		         document.addEventListener('click', gonClick, true);
		         var coordinates = [];
		         function initFastButtons() {
		 new FastButton(document.getElementById("fastclick"), goSomewhere);
		         };
		         function goSomewhere() {
		 var theTarget = document.elementFromPoint(this.startX, this.startY);
		 if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;

		 var theEvent = document.createEvent('MouseEvents');
		 theEvent.initEvent('click', true, true);
		 theTarget.dispatchEvent(theEvent);
		         };
		//========================================================


		$(function(){
			/**
			 * DEFAULT VARS
			 */
			var times = 1;

			// Modal
			$('.modal').modal({
				show: true,
				backdrop: 'static'
			});

			// Toggle events
			$(document).on('click mouseenter', ".btn", function(event) {
				event.preventDefault();

				times++;

				if( $(this).hasClass('no') ) {
					$(".btn").removeClass('btn btn-success mr-1 ml-1 mt-1 mb-1 si').addClass('btn btn-danger mr-1 ml-1 mt-1 mb-1 no').html("不，我不开心");
					$(this).removeClass('btn btn-danger mr-1 ml-1 mt-1 mb-1 no').addClass('btn btn-success mr-1 ml-1 mt-1 mb-1 si').html("是的，我很开心");
				}

				/*var mensajes = {
					"a":"Ups! ¿Que esta pasando?",
					"b":"Quizas es el destino quiere que tu y yo estemos juntos.",
					"c":"En Dios las casualidades no existen.",
					"d":"Todo tiene un proposito en la vida.",
					"e":"Las cosas pasan siplemente por que así Dios le permite.",
					"f":"Conocerte no fue mera suerte, el tiempo me lo ha mostrado.",
					"g":"No he conocido una mujer tan hermosa y especial como tú.",
					"g":"Ya no puedo ocultar lo que siento por tí, mi amistad se convitío en amor.",
					"g":"Un setimiento como ningún otro, que solo desea ser correspondido., "
					"g":"., "
				}*/

				var mensajes = new Array(4);
					mensajes[3] = "¿是的?";
					mensajes[6] = "¡很开心!";
					mensajes[9] = "是的，很开心，没必要继续说啦 :)";
					mensajes[12] = "¿你开心吗？我也很开心¡";
					mensajes[15] = "对我来说很开心啦";
					mensajes[18] = "不需要再弄啦，我们已经很开心啦 ;)";
					mensajes[21] = "但如果这让你也开心的话，那就继续呀";
					mensajes[24] = "我很满意你的回答";
					mensajes[27] = "我非常开心，谢谢堯堯的肯定";
					mensajes[30] = "¿更多开心吗? 哈哈，那没问题";
					mensajes[33] = "一会儿我给你发微信";
					mensajes[36] = "";

				$(".mensajes_times").addClass('show');
				$(".mensajes_times .ctn").html(mensajes[times]);
				
			});
		});
	</script>
	<style>
		.mensajes_times {
			opacity: 0;
			-webkit-transition: all 0.55s ease-in-out;
			-o-transition: all 0.55s ease-in-out;
			transition: all 0.55s ease-in-out;
		}

		.mensajes_times.show {
			opacity: 1;
		}

		.modal-content {
		    background-color: rgba(255, 255, 255, 0.1);
		    border: 1px solid rgba(255, 255, 255, 0.2);
		}
		.btn:focus {
			border-color: transparent;
    		-webkit-box-shadow: none;
    		-moz-box-shadow: none;
    		-ms-box-shadow: none;
    		-o-box-shadow: none;
    		box-shadow: none;
		}
		h1, h2, h3 {font-family: 'Lobster', cursive;}
		body, h4, h5, h6 { font-family: 'Montserrat', sans-serif; }

		.mensajes_times .ctn {
			color: #FFFFFF;
			text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
			-webkit-text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
			-moz-text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
			-ms-text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
			-o-text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
			text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
		}
	</style>
</head>
<body style="height: 100%; background-image: url('image.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;" onLoad="initFastButtons();">
	<div class="modal" tabindex="-1" role="dialog">
	  <div class="modal-dialog modal-dialog-centered">
	    <div class="modal-content" style="box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1); -moz-box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1); -o-box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);">

	      <div class="modal-body text-center">
	      	<div class="container-fluid">
				<div class="row mt-4 mb-3">
					<div class="col">
						<h3 class="mb-4" style="color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); -webkit-text-shadow: 1px 1px 3px rgba(0,0,0,0.3); -moz-text-shadow: 1px 1px 3px rgba(0,0,0,0.3); -o-text-shadow: 1px 1px 3px rgba(0,0,0,0.3);">¿堯堯儿童节开心吗?</h3>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<span id="fastclick">
							<div class="ctn_buttons">
								<button type="button" class="btn btn-success mr-1 ml-1 mt-1 mb-1 si">是的，我很开心</button>
								<button type="button" class="btn btn-danger mr-1 ml-1 mt-1 mb-1 no">不，我不开心</button>
							</div>
						</span>
					</div>
				</div>

				<div class="row mt-4 mb-4 mensajes_times">
					<div class="col">
						<div class="ctn"></div>
					</div>
				</div>
			</div>
	      </div>
	    </div>
	  </div>
	</div>
</body>
</html>
